<template>
	<!-- <page-meta><navigation-bar title="实时监控" front-color="#000000" background-color="#ffffff" /></page-meta> -->
	<view :style="{'min-height':height+'px'}" style="background: #f1f1f1;">
		<view  v-if="$store.state.user">
			<view>
				<view class="scroll-view_H border-bt">
					<view>
						<view class="scroll-view-item_H" data-current="1" @tap="taptap(index)" v-for="(i, index) in scrooldata" :key="index">
							<text style="font-size: 14px;" :class="{ active: nowid == index }">{{ i.name }}</text>
						</view>
					</view>
				</view>
			</view>
			<swiper
				:indicator-dots="false"
				@change="change"
				:style="{ height: scrooldata[nowid].height + 'px' }"
				style="margin-top: 80rpx;"
				:autoplay="false"
				:current="nowid"
				:interval="500"
				:duration="200"
			>
				<swiper-item>
					<view class="shipan">
						<view>
							<view v-for="(i, indexs) in jkdata" style="margin-bottom: 20px;">
								<view>
									<view
										class="l-top"
										style="line-height: 40px;background: #007AFF; text-align: center; color: #fff;font-size: 20px;border-bottom: 1px solid rgba(255,255,255,.1);"
									>
										{{ i.accountNo }}
									</view>
									<view class="l-cen" style="background: #fff;height: 70px;margin-top: 0px;">
										<ul>
											<li>
												<text style="font-size: 16px;padding-bottom: 6px;display: block;color: #000000;">--</text>
												<text style="color: #acacac;">平盈</text>
											</li>
											<li>
												<text style="font-size: 16px;padding-bottom: 6px;display: block;color: #000000;">{{ i.equity ? i.equity : '--' }}</text>
												<text style="color: #acacac;">权益</text>
											</li>
											<li>
												<text style="font-size: 16px;padding-bottom: 6px;display: block;color: #000000;">
												<!-- {{ zongshu(i) }} -->
												{{i.nums}}
												</text>
												<text style="color: #acacac;">总手数</text>
											</li>
										</ul>
									</view>
								</view>
								<view class="l-lst" style="overflow: hidden;margin-top: 10px;padding: 0;background: #fff;padding: 7px 0;border: 0;">
									<block v-if="i.positionList" v-for="(c, index) in i.positionList" >
										<ul style="overflow: hidden;border: 0;position: relative;">
											<li style="padding: 0;line-height: 22px;border-bottom: 0;font-size: 14px;">{{ c.commodityNo + c.contractDate }}</li>
											<li style="padding: 0;line-height: 22px;border-bottom: 0;font-size: 13px;" :style="{ color: c.orderSide == 1 ? 'red' : 'green' }">{{ c.orderSide == 1 ? '买' : '卖' }}{{ c.nums }}</li>
											<li style="padding: 0;line-height: 22px;border-bottom: 0;font-size: 14px;" :style="{ color: Number(c.profitAndLoss) > 0 ? 'red' : Number(c.profitAndLoss) == 0 ? '#337ab7' : 'green' }">{{ c.profitAndLoss }}</li>
										</ul>
										<hr v-if="index != i.positionList.length-1" style="background: rgba(0,0,0,.1);height: .5px;border: 0;width: 100%;margin:7px 0 ;">
									</block>
									<ul v-if="!i.positionList.length || !i.positionList" style="overflow: hidden;border: 0;position: relative;">
										<li style="padding: 0;line-height: 22px;border-bottom: 0;">--</li>
										<li style="padding: 0;line-height: 22px;border-bottom: 0;">--</li>
										<li style="padding: 0;line-height: 22px;border-bottom: 0;">--</li>
									</ul>
								</view>
								<view class="ttt" style="line-height: 35px;text-align: center;color: rgba(0,0,0,.5);font-size: 15px;">
									<view class="" style="width: 33.3333%;float: left;">
										信号
									</view>
									<view class="" style="width: 33.3333%;float: left;">
										平盈
									</view>
									<view class="" style="width: 33.3333%;float: left;">
										浮盈
									</view>
									
								</view>
								
								<view @tap="setico((idx+1)*(indexs+1))" v-if="i.traderList" v-for="j,idx in i.traderList" style="border-bottom: .5px solid rgba(0,0,0,.1); line-height: 45px;text-align: center;color: rgba(0,0,0,.3);font-size: 14px;background: #fff;overflow: hidden;clear: both;">
									<view class="" style="width: 33.3333%;float: left;line-height: 15px;">
										<text style="display: block;padding-top: 7px;font-size: 14px;color: rgba(0,0,0,.5);">
											{{j.nickName}}
										</text>
										<text style="font-size: 11px;">{{j.followSet.tacticsDescSign == 1?'传统':'组合'}} <span style="padding-left: 5px;">{{j.followSet.nums}}倍</span></text>
									</view>
									<view class="" style="width: 33.3333%;float: left;" :style="{color:j.closeProfit>0?'red':'green'}">
										{{j.closeProfit}}
									</view>
									<view class="" style="width: 33.3333%;float: left;" :style="{color:getnum(j)>0?'red':'green'}">
										{{getnum(j)}}
									</view>
									<view @tap="shilogin(j.followSet.id,i.traderList,idx)" :class="{showicon:showicon==(idx+1)*(indexs+1)}" style="line-height: 45px;background: #f1f1f1;clear: both;color: rgb(34,146,234);transition: all .3s ease;height: 0;border-bottom: 1px solid #fff;">
										<view style="display: inline-block;text-align: center;font-size: 15px;">
											<image src="/static/img/zhongz.svg" style="width:13px;height: 13px;float: left;margin-top: 16px;margin-right: 5px;" mode=""></image>
											终止跟单
										</view>
									</view>
								</view>
								<view v-if="!i.traderList || !i.traderList.length" style="border-bottom: .5px solid rgba(0,0,0,.1); line-height: 45px;text-align: center;color: rgba(0,0,0,.3);font-size: 14px;background: #fff;overflow: hidden;clear: both;">
									<view class="" style="width: 33.3333%;float: left;line-height: 15px;">
										<text style="display: block;padding-top: 7px;font-size: 14px;color: rgba(0,0,0,.5);">
											--
										</text>
										<text style="font-size: 11px;">-- <span style="padding-left: 5px;">--</span></text>
									</view>
									<view class="" style="width: 33.3333%;float: left;">
										--
									</view>
									<view class="" style="width: 33.3333%;float: left;">
										--
									</view>
								</view>
								
							</view>
						</view>
					</view>
					<uni-text v-if="!jkdata.length && load" style="height: 400x;font-size: 16px;text-align: center;display: block;color: red;padding-top: 150px;">
						暂无监控信息！
						<navigator url="../center/setshi" style="color:#168deb ;display: inline-block;">去添加</navigator>
					</uni-text>
				</swiper-item>
				<swiper-item>
					<view style="padding: 0 15px;overflow: hidden;" class="jiayi">
						<view>
							<view style="margin-top: 20px;background: #fff;" v-for="(i, index) in jydata">
								<view>
									<view
										class="l-top"
										style="line-height: 60px;color: #fff;font-size: 18px;border-bottom: 1px solid rgba(255,255,255,.1); padding-left: 25px;background: #168deb;border-top-left-radius: 10px;border-top-right-radius: 10px;"
									>
										{{ i.account }}
									</view>
									<view class="l-cen" style="background: #168deb;height: 70px;">
										<ul>
											<li>
												<text>{{ i.equity + getequitys(i) }}</text>
												<br />
												<text>权益</text>
											</li>
											<li>
												<text>{{ zongshu(i) }}</text>
												<br />
												<text>总手数</text>
											</li>
											<li>
												<text>{{ i.fee }}</text>
												<br />
												<text>手续费</text>
											</li>
										</ul>
									</view>
								</view>
								<view class="l-lst">
									<text>持仓</text>
									<ul v-for="(c, index) in i.list">
										<li>{{ c.commodityNo + c.contractDate }}</li>
										<li :style="{ color: c.orderSide == 1 ? 'red' : 'green' }">{{ c.orderSide == 1 ? '买' : '卖' }}{{ c.nums }}</li>
										<li :style="{ color: Number(c.profitAndLoss) > 0 ? 'red' : Number(c.profitAndLoss) == 0 ? '#337ab7' : 'green' }">{{ c.profitAndLoss }}</li>
									</ul>
									<ul v-if="!i.list || !i.list.length">
										<li>--</li>
										<li>--</li>
										<li>--</li>
									</ul>
								</view>
								<view class="l-lst1 l-lst2">
									<text>合计</text>
									<ul style="margin-bottom: 20px;overflow: hidden;">
										<li>
											<span>浮盈</span>
											<span>{{ getequitys(i) }}</span>
										</li>
										<!-- <li>
											<span>手数</span>
											<span>12</span>	
										</li>
										<li>
											<span>浮盈base</span>
											<span>12</span>	
										</li> -->
										<li>
											<span>平仓盈亏</span>
											<span>{{ i.pro }}</span>
										</li>
									</ul>
								</view>
							</view>
						</view>
					</view>
					<uni-text v-if="!jydata.length" style="height: 400x;font-size: 16px;text-align: center;display: block;color: red;padding-top: 150px;">
						暂无监控信息！
						<navigator open-type="switchTab" url="../paihang/index" style="color:#168deb ;display: inline-block;">去订阅</navigator>
					</uni-text>
				</swiper-item>
			</swiper>
		</view>
		<view class="" v-if="!$store.state.user">
			<uni-text style="height: 400x;font-size: 16px;text-align: center;display: block;color: red;padding-top: 150px;">
				检测到您未登录！
				<navigator url="../login/login" style="color:#168deb ;display: inline-block;">去登录</navigator>
			</uni-text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			Url: this.$store.state.url1,
			scrooldata: [{ name: '实盘', height: 500 }, { name: '信号', height: 500 }],
			nowid: 0,
			height:0,
			jkdata: [],
			jydata: [],
			load:false,
			showicon:-1
		};
	},
	methods: {
		shilogin(id,obj,i){
			var _this = this;
			uni.request({
				url: _this.$store.state.url1 + '/api/FollowSetting/EditSheQuAppRATIOFollow?token=' + this.$store.state.user.token+'&id='+id+'&state=3',
				method: 'get',
				// data: _this.param,
				success: res => {
					// console.log(res);
					res = res.data;
					
					if (res.code == 200) {
						
							uni.showToast({
								title: '已终止！',
								duration: 1500
							});
							obj.splice(i,1);
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2500
							// position:'top'
						});
					}
				},
				fail: res => {
					console.log(res);
				}
			});
		},
		getnum(obj){
			var num = 0;
			for(var i in obj.positionList){
				num += obj.positionList[i].profitAndLoss * obj.positionList[i].tradeRate;
			};
			return num;
		},
		setico(num){
			console.log(num)
			if(this.showicon == num){
				this.showicon = -1;
			}else{
				this.showicon = num
			}
			
		},
		zongshu: function(obj) {
			var num = 0;
			if (!obj.list || !obj.list.length) return '--';
			for (var i in obj.list) {
				num += Number(obj.list[i].nums);
			}
			return num;
		},
		change(e, type) {
			this.nowid = e.detail.current;
			// console.log(e.detail.current)
		},
		taptap(id) {
			this.nowid = id;
		},
		getequitys: function(obj) {
			var num1 = 0;
			for (var i in obj.list) {
				var o = obj.list[i];
				num1 += parseInt(o.profitAndLoss) * o.tradeRate;
			}

			return num1;
		},
		getjydata: function() {
			//交易员
			var _this = this;
			// console.log(_this.$store.state.url1 + '/api/TradeUser2/GetDealerAccountFollowTrader?token=' + _this.$store.state.user.token)
			function func(id) {
				uni.request({
					url: _this.$store.state.url1 + '/api/TradeUser2/GetDealerAccountFollowTrader?token=' + _this.$store.state.user.token,
					success: function(data) {
						// console.log(data)
						data = data.data;
						if (data.code == 200) {
							for (var i in data.data) {
								// data.data[i].list= [];
								data.data[i].list = _this.jydata[i] ? (_this.jydata[i].list ? _this.jydata[i].list : []) : [];
								data.data[i].fee = _this.jydata[i] ? (_this.jydata[i].fee ? _this.jydata[i].fee : 0) : 0;
								data.data[i].pro = _this.jydata[i] ? (_this.jydata[i].pro ? _this.jydata[i].pro : 0) : 0;
								data.data[i].equity = _this.jydata[i] ? (_this.jydata[i].equity ? _this.jydata[i].equity : 0) : 0;
								_this.getcc2(data.data, i);
								_this.GetEquity2(data.data, i);
								_this.getpy(data.data[i]);
							}
							_this.jydata = data.data;
							setTimeout(function() {
								let view = uni.createSelectorQuery().select('.jiayi');
								view.fields(
									{
										size: true,
										rect: true,
										scrollOffset: true
									},
									res => {
										if (!res || !res.height) return;
										_this.scrooldata[1].height = res.height + 30;
									}
								).exec();
							}, 800);
						} else {
						}
					},
					fail: res => {
						console.log(res);
					}
				});
			}
			func();
			setInterval(func, 5000);
		},
		getcc2: function(objs, obj) {
			var _this = this;
			var json = {
				token: _this.$store.state.user.token,
				uids: objs[obj].uid
			};
			// console.log(_this.$store.state.url1 +'/api/TradeUser2/Position?token='+_this.$store.state.user.token+'&uids='+objs[obj].uid)
			uni.request({
				method: 'post',
				url: _this.$store.state.url1 + '/api/TradeUser2/getPosition?token=' + _this.$store.state.user.token + '&uids=' + objs[obj].uid,
				// contentType: "application/json;",
				// data:json,
				// data: json,
				success: function(data) {
					// console.log(data,'交易此仓列表',json)
					data = data.data;
					// console.log(data)
					if (data.code == 200) {
						if (!data.data.length) {
							return;
						}
						_this.jydata[obj].list = data.data[0]['position2s'];
						// console.log(_this.jydata[obj].list)
						objs[obj].list = data.data[0]['position2s'];
						for (var j in _this.jydata[obj].list) {
							var o = _this.jydata[obj].list[j];
							_this.getfuying(o);
						}
					} else {
					}
				}
			});
		},
		getpy: function(o) {
			// /api/TradeUser2/QueryProfitAndFeeByDay平盈和手续费
			var _this = this;
			var json = { token: _this.$store.state.user.token, uid: o.uid };
			// console.log(json)
			uni.request({
				method: 'post',
				url: _this.$store.state.url1 + '/api/TradeUser2/getQueryProfitAndFeeByDay?token=' + _this.$store.state.user.token + '&uid=' + o.uid,
				// contentType: "application/json;",
				// data: json,
				// data: JSON.stringify(json),
				success: function(data) {
					// console.log('平盈和手续费',data)
					data = data.data;
					if (data.code == 200) {
						o.fee = data.data.fee;
						o.pro = data.data.pro;
					} else {
					}
				}
			});
		},
		GetEquity2: function(obj, is) {
			//权益
			var _this = this;
			// return
			uni.request({
				method: 'get',
				url: _this.$store.state.url1 + '/api/TradeUser2/getuseravai?token=' + _this.$store.state.user.token + '&uids=' + obj[is].uid,
				// contentType: "application/json;",
				// data: json,
				success: function(data) {
					data = data.data;
					if (data.code == 200) {
						for (var i in data.data) {
							var o = data.data[i];
							if (obj[is].uid == o.uid) {
								obj[is].equity = o.avaiBalance;
								break;
							}
						}
					} else {
					}
				}
			});
		},
		getshipans() {
			//shipan
			var _this = this;
			function get() {
				uni.request({
					// url: this.$store.state.url+'http://47.113.81.106:10016/api/GWDataShow/GetDataShowList',
					url: _this.$store.state.url1 + '/api/DealerAccount/GetRealtimeEquityAndPositionFollowTraderList?token=' + _this.$store.state.user.token + '&loginstate=1',
					method: 'GET',
					data: _this.param,
					success: res => {
						res = res.data;
						// console.log(res)
						if (res.code == 200) {
							_this.load = true;
							_this.jkdata = res.data?res.data:[];
							setTimeout(function() {
								let view = uni.createSelectorQuery().select('.shipan');
								view.fields(
									{
										size: true,
										rect: true,
										scrollOffset: true
									},
									res => {
										if (!res || !res.height) return;
										_this.scrooldata[0].height = res.height + 45;
									}
								).exec();
							}, 800);
						} else {
						}
					},
					fail: res => {
						_this.load = true;
					}
				});
			}
			get();
			setInterval(get, 5000);
		},
		
		getfuying: function(obj, lastPrice) {
			// obj
			var paran = obj.exchangeNo + ' ' + obj.commodityNo + ' ' + obj.contractDate;
			var _this = this;
			uni.request({
				method: 'get',
				url: _this.$store.state.url1 + '/api/Contracts2/getnowpri?ContractName=' + paran,
				header: {
					'content-type': 'application/json; charset=utf-8'
				},
				// data: JSON.stringify(json),
				success: function(data) {
					data = data.data;
					// console.log(data.data,'合约价格')
					if (data.code == 200) {
						if (data.data) {
							var json = data.data;
							// console.log(json.lastPrice-obj.buyPrice,json.lastPrice,obj.buyPrice)
							obj.profitAndLoss =
								obj.orderSide == 1
									? parseFloat(((json.lastPrice - obj.buyPrice) * obj.contMul * obj.nums).toFixed(3))
									: parseFloat(((obj.buyPrice - json.lastPrice) * obj.contMul * obj.nums).toFixed(3));
						} else {
							// obj.isHistoryNums = 0;
						}
					} else {
					}
				},
				fail: res => {
					console.log(res);
				}
			});
		},
		getdata() {
			// this.getshipan();
			this.getshipans();
			this.getjydata();
			var _this = this;
			uni.connectSocket({
				url: this.$store.state.serketUrl
			});
			uni.onSocketOpen(function(res) {
				console.log('WebSocket连接已打开！');
			});

			uni.onSocketError(function(res) {
				// console.log('WebSocket连接打开失败，请检查网络！');
				uni.showToast({
					title: res,
					icon: 'none'
					// position:'top'
				});
			});
			uni.onSocketMessage(function(res) {
				// console.log('收到服务器内容：' + res.data);
				var strarr = res.data.split(',');
				if (strarr.length <= 10) {
					return;
				}
				// console.log(strarr)
				var str = strarr[2] + '' + strarr[3];
				for (var k in _this.jydata) {
					for(var kd in _this.jydata[k].list){
						var o = _this.jydata[k].list[kd];
						// console.log(o.CommodityNo + o.ContractDate == str,o.CommodityNo + o.ContractDate , str)
						if (o.commodityNo + o.contractDate == str) {
							var LastPrice = strarr[12];
							o.profitAndLoss =
								o.orderSide == 1
									? parseFloat(((LastPrice - o.buyPrice) * o.contMul * o.nums).toFixed(3))
									: parseFloat(((o.buyPrice - LastPrice) * o.contMul * o.nums).toFixed(3));
							// break;
							// console.log(o.isHistoryNums)
						}
					}
					
				}
				for (var ks in _this.jkdata) {
					for(var kss in _this.jkdata[ks].positionList){
						var o = _this.jkdata[ks].positionList[kss];
						// console.log(o.CommodityNo + o.ContractDate == str,o.commodityNo + o.contractDate , str)
						if (o.commodityNo + o.contractDate == str) {
							
							var LastPrice = strarr[12];
							o.profitAndLoss =
								o.orderSide == 1
									? parseFloat(((LastPrice - o.buyPrice) * o.contMul * o.nums).toFixed(3))
									: parseFloat(((o.buyPrice - LastPrice) * o.contMul * o.nums).toFixed(3));
							// break;
							// console.log(strarr,o.profitAndLoss)
							
						}
						
					}
					
				}
				
				for (var ks in _this.jkdata) {
					for(var kss in _this.jkdata[ks].traderList){
						var o = _this.jkdata[ks].traderList[kss];
						// console.log(o.CommodityNo + o.ContractDate == str,o.commodityNo + o.contractDate , str)
						for(var ossi in o.positionList){
							var oss = o.positionList[ossi];
							// console
							// console.log(ossi)
							if (oss.commodityNo + oss.contractDate == str) {
								// console.log(LastPrice)
								var LastPrice = strarr[12];
								oss.profitAndLoss =
									oss.orderSide == 1
										? parseFloat(((LastPrice - oss.buyPrice) * oss.contMul * oss.nums).toFixed(3))
										: parseFloat(((oss.buyPrice - LastPrice) * oss.contMul * oss.nums).toFixed(3));
								// break;
								// console.log(strarr,oss.profitAndLoss)
							}
						}
						
					}
					
				}
			});
		}
	},
	onHide() {
		uni.closeSocket();
	},
	onShow() {
		// console.log(this.$store.state.user.token)
		var _this = this;
		uni.getNetworkType({
			success: function(res) {
				if (res.networkType == 'none') {
					uni.showToast({
						title: '当前无网络连接，请检查！',
						icon: 'none',
						duration: 5000

						// position:'top'
					});
				}
			}
		});
		uni.onNetworkStatusChange(function(res) {
			if (!res.isConnected) {
				uni.showToast({
					title: '当前无网络连接，请检查！',
					icon: 'none',
					duration: 3000
					// position:'top'
				});
			} else {
				uni.showToast({
					title: '网络已连接！',
					icon: 'none',
					duration: 3000
					// position:'top'
				});
				_this.getdata();
			}
		});
		_this.getdata();
		this.height = uni.getSystemInfoSync().windowHeight;
		// console.log(123)
	}
};
</script>

<style scoped>
uni-page-body,
uni-page-refresh {
	background: #f7f7f7;
}
.scroll-view_H {
	width: 100%;
	height: 80rpx;
	position: fixed;
	/* #ifdef APP-PLUS */
	top: 0;
	/* #endif */
	/* #ifndef APP-PLUS */
	top: 44px;
	/* #endif */
	background: #fff;
	z-index: 10;
}
.scroll-view_H > view {
	padding: 0;
	display: flex;
	flex-direction: row;
	margin: 0 auto;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	font-size: 32rpx;
	width: 100%;
}
.scroll-view-item_H {
	flex: 1;
	display: inline-block;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	font-size: 32rpx;
	padding: 0;
}
.scroll-view-item_H uni-text{
	padding: 0;
	margin: 0;
}
.scroll-view-item_H uni-text.active {
	border-bottom: 2px solid #168deb;
	box-sizing: border-box;
	color: #168deb;
	display: inline-block;
	height: 80rpx;
}
.scroll-view-item_H:first-of-type uni-text {
	float: right;
	margin-right: 40px;
}
.scroll-view-item_H:last-of-type uni-text {
	float: left;
	margin-left: 40px;
}
ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.l-cen {
}
.l-cen li {
	float: left;
	width: 33.3333%;
	color: #fff;
	text-align: center;
	font-size: 14px;
	padding-top: 15px;
}
.l-lst,
.l-lst1 {
	padding: 0 10px;
}
.l-lst uni-text {
	font-size: 14px;
	text-indent: 25px;
	display: block;
	padding: 5px 0;
	padding-top: 12px;
}
.l-lst ul {
	border: 1px solid rgba(0,0,0,.1);
	border-right: 0;
	border-bottom: 0;
	box-sizing: border-box;
	overflow: hidden;
}
.l-lst ul li {
	float: left;
	width: 33.3333%;
	box-sizing: border-box;
	text-align: center;
	font-size: 12px;
	line-height: 27px;
	border-right: 1px solid rgba(0,0,0,.1);
}
.l-lst ul:last-of-type li {
	border-bottom: 1px solid rgba(0,0,0,.1);
}
.l-lst1 uni-text {
	font-size: 14px;
	text-indent: 25px;
	display: block;
	padding: 5px 0;
	padding-top: 12px;
}
.l-lst1 ul li {
	line-height: 27px;
	font-size: 13px;
	width: 50%;
	float: left;
	box-sizing: border-box;
	border: 1px solid rgba(0,0,0,.1);
	border-right: 0;
	border-bottom: 0;
	border-left: 0;
}
.l-lst1 ul li:first-of-type {
	border-left: 1px solid rgba(0,0,0,.1);
}
.l-lst1 ul li span {
	display: block;
	text-align: center;
	box-sizing: border-box;
	border-bottom: 1px solid rgba(0,0,0,.1);
	border-right: 1px solid rgba(0,0,0,.1);
}
.l-lst1 {
	margin-bottom: 20px;
	overflow: hidden;
}
.l-lst2 ul li {
	width: 50%;
}
.l-lst3 ul li {
	border-left: 1px solid rgba(0,0,0,.1);
}
.showicon{
	height: 45px !important;
}
</style>
